import tpl from './index.html';

export default {
    // 加载模板文件
    template: tpl,
    // 接受外部数据
    propTypes: {
        // 1、常用
        // 组件唯一默认对外双向绑定的数据
        value: {
            type: 'numeric',
            value: ''
        },
        // 组件包裹层自定义行内样式
        style: {
            type: 'string',
            value: ''
        },
        // 2、更多
        options: {
            type: 'array',
            value: []
        },
        // 3、尺寸
        size: {
            type: 'string',
            value: '',
        },
        //3、初始值
        // valueName: {
        //     type: 'string',
        //     value: '请选择',
        // },
        // 自定义回调方法
        onselect: {
            type: 'string',
            value: ''
        },
    },
    // 内部数据
    data: function () {
        return {
            name: "组件名称",
            // 状态
            states: {

            },
            // 配置
            opts: {

            },
            showOptions: false,
            clickout: function () {
                alert('clickout')
            }
        }
    },
    // 方法
    methods: {
        switchOptions: function () {
            var self = this;
            self.toggle('showOptions');
        },
        hideOptions: function () {
            this.set('showOptions', false);
        },
        // choose: function(index){
        //     var self = this;
        //     // var value1 = self.get('options.'+ index)
        //     var value = self.get('options')
        //     var val = value[index].val
        //     self.set('value', val);
        //     self.switchOptions();
        // },
    },
    // 事件
    events: {
        // 接受子组件点击事件
        optionSelect: function (event, data) {
            this.set('value', data.value);
            this.switchOptions();
        }
    },
    // 内部过滤器
    filters: {

    },
    // 数据监听
    watchers: {
        "showOptions": {
            watcher: function (newValue) {
                var self = this;
                if (newValue) {
                    var el = $(self.$el).offset().top;
                    var winH = window.innerHeight;
                    var curH = self.$el.childNodes[1].offsetHeight;
                    var curTop = el - window.scrollY;
                    if (curH >= 180) {
                        self.set('maxheight', true);
                        if ((winH - curTop) < 180) {
                            if (curTop < 180) {
                                self.set('isTop', false);
                            } else {
                                self.set('isTop', true);
                            }
                        } else {
                            self.set('isTop', false);
                        }
                    } else {
                        self.set('maxheight', false);
                        if ((winH - curTop) < curH) {
                            if (curTop < 180) {
                                self.set('isTop', false);
                            } else {
                                self.set('isTop', true);
                            }
                        } else {
                            self.set('isTop', false);
                        }
                    }
                }
            },
            sync: true
        },
        "value": {
            watcher: function (newValue) {
                var self = this;
                // var list = self.get('options');
                var list = self.$children;
                if(list){
                    for (var i = 0; i < list.length; i++) {
                        var childValue = list[i].get('value');
                        var valueName = list[i].get('$slot_children')[0].text;
                        if (childValue === newValue) {
                            self.set('valueName', valueName);
                            var onselect = self.get('onselect');
                            this.fire(onselect, {value: newValue});
                        }
                    }
                }
                if (self.$children) {
                    var child = self.$children;
                    for (var i = 0; i < child.length; i++) {
                        var childValue = child[i].get('value');
                        if (newValue == childValue) {
                            child[i].set('choose', true)
                        } else {
                            child[i].set('choose', false)
                        }
                    }
                }
            },
            sync: true
        },
        "valueName": {
            watcher: function (newValue) {
                var self = this;
                var data = self.get("value")
                if(!data){
                    self.set('valueName', '请选择');
                }
            },
            sync: true
        },
    },
    afterMount: function () {
        var self = this;

    }
};